<!--
 * @Descripttion: 指标排名组件
 * @Author: caijj
 * @Date: 2021-02-25 14:11:56
 * @LastEditors: caijj
 * @LastEditTime: 2021-03-09 09:29:39
-->
<template>
  <el-card shadow="never" class="container">
    <TablePagination
      :columns="columns"
      :data="tableData"
      :total="total"
      :page-size="size"
      :current-page="current"
      :loading="loading"
      :page-sizes="[20, 30, 50]"
      border
      @handlePaginationChange="onPaginationChange"
    >
      <div slot="operate-btn-bar" class="operate">
        <el-button-group>
          <el-button
            v-for="item in btns"
            :key="item.name"
            :type="`${ item.active ? 'primary' : ''}`"
            @click="onClickTarget(item)"
          >{{ item.name }}</el-button>
        </el-button-group>
        <el-dropdown class="button-gutter" @command="onExportFile">
          <el-button
            type="success"
            class="btn"
            icon="el-icon-download"
            :loading="exporting"
          >
            导出报表
            <i class="el-icon-arrow-down el-icon--right" />
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :command="0">Excel</el-dropdown-item>
            <el-dropdown-item :command="1">CSV</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </TablePagination>
  </el-card>
</template>
<script>
import TablePagination from '@/components/common/TablePagination';
import { getStoreAchievementCityData, exportStoreAchievementCityData } from '@/api/storeAchievementApi';
import { exportFile } from '@/utils/tools';
import config from './config.js';

export default {
  name: 'TargetRankingTable',
  components: {
    TablePagination
  },
  props: {
    params: {
      type: Object,
      required: true,
      default: () => {}
    }
  },
  data() {
    return {
      btns: [
        { name: '前台毛利额TOP20 SKU', method: 'getTopFrontGrossProfitList', export: 'exportTopFrontGrossProfitList', active: true },
        { name: '前台毛利额BOT20 SKU', method: 'getBotFrontGrossProfitList', export: 'exportBotFrontGrossProfitList', active: false },
        { name: '销售毛利额TOP20 SKU', method: 'getTopSaleGrossProfitList', export: 'exportTopSaleGrossProfitList', active: false },
        { name: '销售毛利额BOT20 SKU', method: 'getBotSaleGrossProfitList', export: 'exportBotSaleGrossProfitList', active: false }
      ],
      activeBtn: {},
      exporting: false,
      columns: config.Columns,
      tableData: [],
      total: 0,
      current: 1,
      size: 20,
      loading: false
    };
  },
  created() {
    this.activeBtn = this.btns[0];
  },
  methods: {
    onClickTarget(item) {
      this.btns.forEach(item => (item.active = false));
      item.active = true;
      this.activeBtn = item;
      this.onFetchTableData();
    },
    onExportFile(downType) {
      const params = {
        type: this.activeBtn.export,
        data: {
          current: this.current,
          size: this.size,
          downType,
          ...this.params
        }
      };
      this.exporting = true;
      exportStoreAchievementCityData(params).then(res => {
        const fileName = `${this.activeBtn.name}${downType === 0 ? '.xlsx' : '.csv'}`;
        exportFile(res, fileName);
        this.exporting = false;
      }).catch(err => {
        this.exporting = false;
        console.log(err);
      });
    },
    /* 分页查询 */
    onPaginationChange({ current, size }) {
      this.current = current;
      this.size = size;
      this.onFetchTableData();
    },
    onFetchTableData() {
      this.loading = true;
      const data = {
        current: this.current,
        size: this.size,
        ...this.params
      };
      getStoreAchievementCityData(this.activeBtn.method, data).then(({ data, resultCode, total }) => {
        if (resultCode === '0000') {
          this.tableData = data;
          this.loading = false;
          this.total = total;
        }
      }).catch(err => {
        console.error(err);
        this.tableData = [];
        this.total = 0;
        this.loading = false;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
  .container {
    border: none;
  }
  .operate {
    display: flex;
    justify-content: space-between;
    margin: 20px 0px;
  }
</style>
